<template>
    <div>
		<el-container>
		  <el-header>
			  <el-form :inline="true">
				  <el-form-item>
					  <el-button type="success" size="mini">添加规格</el-button>
				  </el-form-item>
				  <el-form-item>
					  <el-button type="danger" size="mini">批量删除</el-button>
				  </el-form-item>
			  </el-form>
		  </el-header>
		  <el-main>
			  <el-table :data="goodsTypeList" border>
				  <el-table-column label="规格名称" prop="name" align="center"></el-table-column>
				  <el-table-column label="规格值" align="center"></el-table-column>
				  <el-table-column label="排序" align="center" prop="order"></el-table-column>
				  <el-table-column label="状态" align="center">
					  <template slot-scope="scope">
					  	<el-button type="success" plain size="mini" v-if="scope.row.status == 1">启用</el-button>
					  	<el-button type="danger" plain size="mini" v-else>禁用</el-button>
					  </template>
				  </el-table-column>
				  <el-table-column label="操作" align="center">
					  <template slot-scope="scope">
						  <el-button-group>
						    <el-button type="primary" size="mini" plain>修改</el-button>
						    <el-button type="danger" size="mini" plain>删除</el-button>
						  </el-button-group>
					  </template>
				  </el-table-column>
			  </el-table>
		  </el-main>
		  <el-footer>
			  <!-- 分页器区域 -->
			  <el-pagination
				@size-change="changeSize"
				@current-change="changePage"
				:current-page="page"
				:page-sizes="[10, 15, 20, 25]"
				:page-size="limit"
				layout="total, sizes, prev, pager, next, jumper"
				:total="totals">
			  </el-pagination>
		  </el-footer>
		</el-container>
    </div>
</template>

<script>
export default {
    props:[],
    components: {},
    data() {
        return {
			page: 1,
			limit: 10,
			totals: 0,
			goodsTypeList: [],
        };
    },
    created() {

    },
    mounted() {
		this.getGoodsType();
    },
    methods: {
		// 获取商品规格的数据
		getGoodsType() {
			this.$axios.get(`/api/admin/goods_type/${this.page}&limit=${this.limit}`).then(res => {
				console.log(res)
				this.goodsTypeList = res.data.list;
				this.totals = res.data.totalCount;
			})
		},
		// 分页的操作
		changeSize(size) {
			this.limit = size;
			this.getGoodsType();
		},
		changePage(page) {
			this.page = page;
			this.getGoodsType();
		}
    },
    computed:{

    },
    watch:{

    }
};
</script>

<style lang="scss" scoped>
.el-container {
	width: 100%;
	// 头部区域布局
	.el-header {
		width: 100%;
		padding-top: 10px;
	}
	// 底部区域布局
	.el-footer {
		width: 100%;
		background: #F0F0F0;
		display: flex;
		align-items: center;
		position: fixed;
		bottom: 0px;
	}
}
</style>
